<template>
	<view class="home-container">
		<view class="home-header">
			<view class="home-cricle"></view>
			<view class="user">
				<text>您好！，{{username}}~</text>
			</view>
		</view>
		<view class="home-time">
			<view class="time-left">
				<image src="../../static/imgs/home-time.png" mode=""></image>
			</view>
			<view class="time-right">
				<view class="time">
					<text style="font-size: 70rpx;color: #3D5464;font-weight: 800;">{{nowTime}}</text>
					<text
						style="font-size: 28rpx;color: #71818C;font-weight: 800;margin-left: 28rpx;">{{nowData}}</text>
				</view>
				<view class="time-desc">
					积累知识，胜过积蓄金银。
				</view>
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="hot-recommend">
			<CommonNav name="热门课程"></CommonNav>
			<view class="recommend-content">
				<navigator class="recommend-item" v-for="item in course" :url="item.path">
					<image src="../../static/imgs/hot-recommend-1.png" mode=""></image>
					<text>{{item.name}}</text>
				</navigator>
			</view>
		</view>
		<!-- 直播课堂 -->
		<view class="live">
			<CommonNav name="直播课堂"></CommonNav>
			<view class="live-content">
				<navigator class="live-item c-theme-btn-b" v-for="item in live" :key="item.id" :url="item.path">
					<view class="play c-theme-btn-w">
						<image src="../../static/imgs/play.png" mode=""></image>
					</view>
					<view class="live-title">
						{{item.name}}
					</view>
					<view class="live-time">
						直播时间：{{item.time}}
					</view>
				</navigator>
			</view>
		</view>
		<!-- 秒杀 -->
		<view class="seckill">
			<CommonNav name="限时秒杀"></CommonNav>
			<view class="seckill-content c-theme-btn-b">
				<view class="seckill-item" v-for="item in courseData" :key="item.id" @click="toDetail(item.id)">
					<view class="seckill-left">
						<image src="../../static/imgs/seckill.png" mode=""></image>
						<view class="seckill-info">
							<view class="seckill-name">
								<text>{{item.title}}</text>
							</view>
							<view class="seckill-price">
								<text style="font-size: 36rpx;color: #FFB300;">￥{{item.price}}</text>
								<text style="text-decoration: line-through;font-size: 24rpx;color: #999FAD;">￥169</text>
							</view>
						</view>
					</view>
					<view class="seckill-right">
						<view class="seckill-time">
							<text style="font-size: 20rpx;">倒计时：</text><text
								style="font-size: 36rpx;color: #FFB300;">4</text>天
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 相关推荐 -->
		<view class="recommend">
			<CommonNav name="相关推荐"></CommonNav>
			<view class="rec-box">
				<view class="rec-item" v-for="item in courseData" :key="item.id" @click="toDetail(item.id)">
					<image src="../../static/imgs/recommend1.png" mode=""></image>
					<view class="rec-title">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonNav from "../../components/CommonNav.vue"
	import {
		course
	} from "@/api/index.js"
	import {
		getcurrentDate,
		getcurrentTime
	} from "@/utils/utils.js"
	import {
		courseList
	} from "@/api/course.js"
	export default {
		components: {
			CommonNav
		},
		data() {
			return {
				course: [{
						name: "新课推荐",
						path: "../recommend/recommend"
					},
					{
						name: "免费好课",
						path: "../recommend/free"
					},
					{
						name: "vip会员",
						path: "../recommend/vip"
					}
				],
				seckill: [{
						name: '手机拍出短视频Vlog',
						price: "109",
						time: "4",
						id: 1,
						path: "/pages/index/details"
					},
					{
						name: '手机拍出短视频Vlog',
						price: "109",
						time: "4",
						id: 2,
						path: "/pages/index/details"
					},
					{
						name: '手机拍出短视频Vlog',
						price: "109",
						time: "4",
						id: 3,
						path: "/pages/index/details"
					}
				],
				live: [{
						name: "UI设计思路分享",
						time: "10:00",
						path: "/pages/index/live",
						id: 1
					},
					{
						name: "UI设计思路分享",
						time: "10:00",
						path: "/pages/index/live",
						id: 2
					},
					{
						name: "UI设计思路分享",
						time: "10:00",
						path: "/pages/index/live",
						id: 3
					},
					{
						name: "UI设计思路分享",
						time: "10:00",
						path: "/pages/index/live",
						id: 4
					}
				],
				nowTime: "",
				courseData: []
			}
		},
		computed: {
			// 设置用户名
			username() {
				return uni.getStorageSync("userInfo").username
			},
			nowData() {
				return getcurrentDate()
			},
			
		},
		mounted() {
			this.currentTime();
			this.getCourse()
		},
		methods: {
			// 获取当前时间
			formatDate() {
				let date = new Date();
				let hour = date.getHours(); // 时
				hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
				let minute = date.getMinutes(); // 分
				minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
				let second = date.getSeconds(); // 秒
				second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
				this.nowTime = ` ${hour}:${minute}`;
			},
			currentTime() {
				setInterval(this.formatDate, 500);
			},
			// 获取课程列表
			getCourse() {
				course().then(res => {
					this.courseData = res.data.records
					console.log(res)
				})
			},
			// 跳转到详情页面
			toDetail(val) {
				uni.navigateTo({
					url: `/pages/index/details?id=` + val
				})
			}

		},
		// 销毁定时器
		beforeDestroy() {
			if (this.formatDate) {
				clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
			}
		}
	}
</script>

<style scoped lang="scss">
	.home-container {
		padding: 0 60rpx;
		overflow-y: auto;

		.home-header {
			display: flex;
			align-items: center;
			margin-top: 200rpx;

			.home-cricle {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				background: #3F7BED;
				margin-right: 40rpx;
			}

			text {

				font-weight: 800;
				color: #3D5464;
				font-size: 40rpx;
			}
		}

		.home-time {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time-left {
				image {
					width: 240rpx;
					height: 240rpx;
				}
			}

			.time-right {
				.time-desc {
					color: #71818C;
					font-weight: bold;
					font-size: 28rpx;
				}
			}
		}

		.hot-recommend {
			margin: 40rpx 0;

			.recommend-content {
				display: flex;
				align-items: center;
				justify-content: center;

				.recommend-item {
					width: 240rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 240rpx;
						height: 240rpx;
					}

					text {
						font-size: 24rpx;
						color: #1E2E3C;
					}
				}
			}
		}

		.live {
			.live-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.live-item {
					width: 264rpx;
					background: #F4F6F8;
					padding: 20rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx solid #FFFFFF;
					margin: 20rpx 0;

					.play {
						width: 60rpx;
						height: 60rpx;
						background-color: #FFFFFF;
						border-radius: 50%;
						line-height: 60rpx;
						text-align: center;

						image {
							width: 24rpx;
							height: 28rpx;
						}
					}

					.live-title {
						margin: 22rpx 0;
						color: #3D5464;
						font-size: 28rpx;
					}

					.live-time {
						font-weight: 400;
						color: #3F7BED;
						font-size: 20rpx;
					}
				}
			}
		}

		.seckill {
			margin: 80rpx 0;

			.seckill-content {
				margin: 40rpx 0;
				background-color: #F4F6F8;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}

			.seckill-item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.seckill-left {
					display: flex;
					align-items: center;

					image {
						width: 169rpx;
						height: 160rpx;
					}

					.seckill-price {
						margin-top: 20rpx;
					}
				}

				.seckill-right {
					margin-top: 60rpx;
					padding-right: 20rpx;
				}
			}
		}

		.recommend {
			padding-bottom: 80rpx;
			margin: 40rpx 0;

			.rec-box {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.rec-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 200rpx;
						height: 220rpx;
					}
				}
			}
		}
	}
</style>
